<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<!--
 * Created on 2014-3-5
 *
 * To change the template for this generated file go to
 * Window - Preferences - PHPeclipse - PHP - Code Templates
-->
 <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>For Art</title>
<script type="text/javascript">
function fillCircle(ctx, r){
   ctx.beginPath();
   ctx.moveTo(r, 0);
   ctx.fillStyle = 'rgb(245,50,50)';
   ctx.arc(0,0,r,0,Math.PI*2,true);
   ctx.fill();
}
//支架
function branch(ctx, r, d, t, a){
  ctx.save();
  ctx.rotate(t*a);
  ctx.translate(0, -r*(1+d));
  wing(ctx, r*d, a);
  ctx.restore();
}
//羽毛
function feather(ctx, r){
  if ( r < 3 ) return;
  var d = 0.85;
  ctx.rotate(-0.03*Math.PI);
  ctx.translate(0, -r*(1+d));
  fillCircle(ctx, r);
  feather(ctx, r*d);
}
//翅膀
function wing(ctx, r, a){
  if ( r < 2.9 ) return;
  fillCircle(ctx, r);
  branch(ctx, r, 0.9561, 0.03*Math.PI, a);
  ctx.save();
  ctx.rotate(0.55*Math.PI);
  feather(ctx, 0.8*r);
  ctx.restore();
}
//尾部
function tail(ctx, s, a){
  if ( s < 0.5 ) return;
  var d = 0.98; // decay
  fillCircle(ctx, s);
  ctx.rotate(-0.15*Math.abs(a));
  ctx.translate(0, s*(1+d));
  tail(ctx, s*d, a);
}
//头部
function head(ctx){
   fillCircle(ctx, 22);
   // 嘴巴
   ctx.save();
   ctx.translate(-15, -3);
   ctx.beginPath();
   ctx.fillStyle = "white";
   ctx.arc(0,0,10,0,Math.PI*2,true);
   ctx.fill();
   ctx.restore();
   // 眼睛
   ctx.translate(9, -4);
   ctx.beginPath();
   ctx.fillStyle = "black";
   ctx.arc(0,0,5,0,Math.PI*2,true);
   ctx.fill();
   // 角
   ctx.translate(6, -8);
   ctx.rotate(0.6*Math.PI);
   wing(ctx, 5.5, 1.8);
}
//脖子
function neck(ctx, s){
  if ( s < 10 ) { head(ctx); return; }
  var d = 0.85;
  fillCircle(ctx, s);
  ctx.save();
  ctx.rotate(-Math.PI/2);
  ctx.translate(0, s);
  fillCircle(ctx, s/2);
  ctx.restore();
  ctx.rotate(-0.15);
  ctx.translate(0, -s*(1+d));
  neck(ctx, s*d);
}

function loop(ctx, i) {
  var inner = function() {
    i++;

//涂白 - 清理画布
    ctx.fillStyle = "white";
    ctx.fillRect(-1500,-1500,3000,3000);
    ctx.save();

//垂直方向 移动原点
    ctx.translate(0, Math.cos(i*0.1)*40);
    var a = Math.sin(i*0.1);

    //右侧翅膀
    ctx.save();
    ctx.rotate(Math.PI*0.4);
    wing(ctx, 18, a);
    ctx.restore();
   
//左侧翅膀
    ctx.save();
    ctx.scale(-1, 1);
    ctx.rotate(Math.PI*0.4);
    wing(ctx, 18, a);
    ctx.restore();

    //尾巴
    ctx.save();
    tail(ctx, 20, Math.sin(i*0.05));
    ctx.restore();
   
//头部
    neck(ctx, 22);
    ctx.restore();
    setTimeout(inner, 35); // change speed here
  };
  return inner;
}

function draw() {
   var canvas = document.getElementById("canvas");
   var ctx    = canvas.getContext("2d");
   ctx.translate(150, 200);
   ctx.scale(0.3,0.3);
   setTimeout(loop(ctx, 1), 1);
}
</script>
</head><body onload="draw()">
  <canvas id="canvas" width="400" height="700"></canvas>
</body>
</html>
</html>
